<template>
  <m-popup :visible.sync="show" height="85vh" @close="handleCancel" @open="handleOpen">
    <view slot="header" class="header">
      <text>目标站点-人工指定</text>
      <text class="subTitle">请您选择一个以下库位作为目标站点</text>
    </view>

    <m-radio-group inline v-model="target" v-if="list.length">
      <view class="radio-box">
        <m-radio-button
          width="220rpx"
          :label="
            it.stackNo +
            '%' +
            it.levelNo +
            '%' +
            it.locationNo +
            '%' +
            it.stationId +
            '%' +
            it.stationCode +
            '%' +
            it.areaId +
            '%' +
            it.barcode
          "
          v-for="(it, index) in list"
          :key="index"
        >
          {{ it.stationCode }}

          <view class="status" :class="{ waring: it.status !== 0 }">
            {{ dicts['stock_status_type'].map[it.status] }}
          </view>
        </m-radio-button>
      </view>
    </m-radio-group>
    <m-empty v-else />

    <view slot="footer" class="footer">
      <m-button size="xl" type="default" plain width="26%" @click="handleCancel">取消 </m-button>
      <m-button size="xl" width="70%" @click="handleConfirm"> 保存 </m-button>
    </view>
  </m-popup>
</template>

<script>
import { stationList } from '@/api/modules/in-work'
import { mapState } from 'vuex'

export default {
  props: {
    palletCode: {
      type: String,
      default: '',
    },
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: null,
    },
  },
  computed: {
    ...mapState({
      dicts: (state) => state.outWork.dicts,
      imsList: (state) => state.cache.imsList,
    }),
  },
  watch: {
    value(val) {
      this.show = val
    },
  },
  methods: {
    async handleOpen() {
      const { rows } = await stationList({
        imsId: this.id,
        pageNum: 1,
        pageSize: 10000,
        stockStatus: 0,
        status: 1,
        palletCode: this.palletCode,
      })
      this.list = rows
      this.imsText = this.imsList.map[this.id]
      this.imsId = this.id
      const { stackNo, levelNo, locationNo, stationId, stationCode, areaId, barcode } = rows[0]
      this.target =
        stackNo + '%' + levelNo + '%' + locationNo + '%' + stationId + '%' + stationCode + '%' + areaId + '%' + barcode
    },
    handleCancel() {
      this.list = []
      this.$emit('input', false)
    },
    handleConfirm() {
      const [stackNo, levelNo, locationNo, stationId, stationCode, areaId, barcode] = this.target.split('%')
      this.$emit('confirm', {
        stationId,
        stationCode,
        stackNo,
        levelNo,
        locationNo,
        areaId,
        barcode,
      })
      this.handleCancel()
    },
  },
  data() {
    return {
      show: false,
      list: [],
      target: '',
      imsId: '',
      imsText: '',
    }
  },
}
</script>

<style lang="scss" scoped>
.radio-box {
  display: grid;
  grid-template-columns: repeat(3, 220rpx);
  grid-gap: 20rpx;

  .radio {
    font-size: 30rpx;
    font-weight: bold;
    border-color: #d7dce0;
    color: #748da7;
    margin: 0;
    &--checked {
      border-color: #248dfa;
      color: #248dfa;
    }
  }
  .status {
    font-size: 24rpx;
    color: #21d58f;
    margin-top: 10rpx;
    &.waring {
      color: rgb(255, 139, 34);
    }
  }
}

.header {
  display: flex;
  flex-direction: column;
  margin-bottom: -40rpx;
  text {
    text-align: left;
    margin-left: 30rpx;
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .subTitle {
    font-size: 30rpx;
    color: #4b5661;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
}
</style>
